<template>
    <div id="login">
    <div class="login-wrap">
        <ul class="menu-tab">
            <li :class="{current:item.current}" v-for="item in menuTab" :key="item.id" @click="toggleMenu(item)">{{item.txt}}</li>
        </ul>
        <!-- 表单 -->
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-form" size="medium">
    <el-form-item prop="username" class="item-from">
        <label>邮箱</label>
    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
    </el-form-item>
        <!-- 密码 -->
    <el-form-item prop="password">
        <label>密码</label>
    <el-input type="password" v-model="ruleForm.password" autocomplete="off" minlength="6" maxlength="20"></el-input>
    </el-form-item>
        <!-- 重复密码 -->
    <el-form-item prop="passwords" v-show="model ==='register'">
        <label>重复密码</label>
    <el-input type="password" v-model="ruleForm.passwords" autocomplete="off" minlength="6" maxlength="20"></el-input>
    </el-form-item>
        <!-- 验证码 -->
    <el-form-item prop="code">
        <label>验证码</label>
    <el-row :gutter="10">
    <el-col :span="15"><el-input v-model.number="ruleForm.code"></el-input></el-col>
    <el-col :span="9"><el-button type="success" class="block" @click="getSms()">获取验证码</el-button></el-col>
    </el-row>
    </el-form-item>
    
    <el-form-item>
    <el-button type="danger" @click="submitForm('ruleForm')" class="login-btn block">提交</el-button>
    </el-form-item>
</el-form>    
    </div>
    </div>
</template>
<script>
import {GetSms} from '@/api/login.js'
import {stripscript,validateEmail,validatePass,validatecheck} from '@/utils/validate'
import{reactive,ref,onMounted} from '@vue/composition-api'
export default {
    setup(props,context){
          // 用户名格式
      let validateUsername = (rule, value, callback) => {
         
        if (value === '') {
            callback(new Error('请输入用户名'));
        }else if(!validateEmail(value)){
            callback(new Error('用户名格式有误'))
        }else{
            callback();//true
        }
      };
    //   验证密码
      let validatePassword = (rule, value, callback) => {
          ruleForm.password = stripscript(value)
          value = ruleForm.password
          console.log(value)
         
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (!validatePass(value)) {
          callback(new Error('密码为6至20位数字+字母!'));
        } else {
          callback();
        }
      };
    //二次密码验证
      let validatePasswords = (rule, value, callback) => {
        //如果模块type为login的时候直接通过
        if(model === 'login'){callback();}
          ruleForm.passwords = stripscript(value)
          value = ruleForm.passwords
          console.log(value)
         
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value != ruleForm.password) {
          callback(new Error('重复密码不正确!'));
        } else {
          callback();
        }
      };
    //   验证码格式
      let validateCode = (rule, value, callback) => {
          ruleForm.code = stripscript(value)
          value = ruleForm.code
        if (value === '') {
            return callback(new Error('验证码不能为空'));
        }else if(!validatecheck(value)){
            return callback(new Error('验证码格式错误'));
        }else{
            callback();
        }
      };
      /**
       * 声明数据
       */
      //放data数据,生命周期,自定义函数
        //reactive声明一个单一对象的时候时使用
        const menuTab = reactive([{txt:"登录",current:true , type:'login'},
                {txt:"注册",current:false , type:'register'}])
        const model = ref('login')
        console.log(model.value)
        // 表单数据绑定
        const ruleForm = reactive({
            username:'',
            password:'',
            code: '',
            passwords:''
            })
  //表单的验证:
        const rules = reactive({
                username: [
                  { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                  { validator: validatePassword, trigger: 'blur' }
                ],
                passwords: [
                  { validator: validatePasswords, trigger: 'blur' }
                ],
                code: [
                  { validator: validateCode, trigger: 'blur' }
                ]
              })

    /**
     * 声明方法函数
     * 需要return出去
     * 不用this
     */
    const toggleMenu =(data=>{
      console.log(data)
        menuTab.forEach(elem =>{
            elem.current = false
        })
        data.current = true;
        //修改model的值
        model.value = data.type
            }) 
        /**
         * 获取验证码
         */
        /**
       * 提交表单
       */
      const getSms = (()=>{
        GetSms();
        // alert("asdasd")
      })

     const submitForm = (formName=>{
       axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });




        context.refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      })


  // 生命周期3.0
  onMounted(()=>{
    
  })
  return {
    menuTab,
    model,
    toggleMenu, 
    submitForm,
    ruleForm,
    rules,
    getSms
  }

  },
    name:"login",
    
}
</script>
<style lang="scss" scoped>
#login{
    height: 100vh;
    background-color: #344a5f;
}
.login-wrap{
    width: 330px;
    margin:auto;
}
.menu-tab{
    text-align: center;
    li {
        display:inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color:#fff;
        border-radius: 2px;
        cursor: pointer;

    }
    .current{
        background-color: rgba(0,0,0,0.1);
    }
}
.login-form{
    margin-top: 29px;
    label{
        display: block;
        font-size:14px;
        color:#fff ;
        margin-bottom: 3px;
    }
.item-from{margin-bottom: 13px;}
.block{width: 100%; display: block;}
.login-btn{margin-top: 19px;}
}
</style>